<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>作用域插槽</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <child>
      <template slot-scope="props">
        <h1>{{props.item}}</h1>
      </template>
    </child>
  </div>

  <script>
    // 使用场景： 当自组件作循环，自组件部分内容是由外部传递的时候
    // 子组件插槽可以 向父组件插槽传递数据, 父组件接收数据：slot-scope="props"

    // 父组件调用子组件的时候，给子组件传了一个插槽(作用域插槽)，以template模版开头
    // 接收的子组件的数据都存放在props里
    Vue.component('child', {
      data: function() {
        return {
          List: [1,2,3,4,5]
        }
      },
      template: `
          <div>
            <slot v-for="item of List" :item="item"></slot>
          </div>`
    })

    var vm = new Vue({
      el: '#root'

    })
  </script>
</body>
</html>